<template>
  <view class="main-box">
    <block v-for="(item, index) in dataList" :key="index">
      <view class="item" @click="toDetail(item._id)">
        <view class="img-wrapper">
          <image
            class="image"
            :src="item.spec_items[0].thumbnail | thumbnail"
            mode="aspectFill"
          ></image>
          <!-- TODO -->
          <text class="date">{{ item.spec_items[0].pname }}</text>
        </view>
        <view class="desc">
          <view class="desc-bottom">
            <view class="money">
              <text class="unit">￥</text>
              <text class="num">{{ item.spec_items[0].price }}</text>
            </view>
            <view class="sold">
              <text class="label">已售</text>
              <text class="count">{{
                item.spec_items[0].sold_out | randomSold
              }}</text>
            </view>
            <myscore />
          </view>
        </view>
      </view>
    </block>
  </view>
</template>

<script>
import Myscore from "./score.vue";
export default {
  components: {
    Myscore,
  },
  props: ["dataList"],
  methods: {
    toDetail(id) {
      uni.navigateTo({
        url: `/pageA/product-detail/product-detail?id=${id}`,
      });
    },
  },

  filters: {
    randomSold() {
      const m = 100;
      const n = 15;
      return Math.floor(Math.random() * (m - n + 1)) + n;
    },
  },
};
</script>

<style scoped lang="less">
@import "@/static/css/util.less";

.main-box {
  background-color: #fff;
}

.item {
  display: flex;
  margin-bottom: 20upx;
  flex-direction: column;
  border-bottom: 1px solid #dfe1ec;
  padding-bottom: 20rpx;

  .img-wrapper {
    width: calc(100% - 64rpx);
    height: 328upx;
    position: relative;
    margin-right: 20upx;
    padding: 0 32rpx;
    box-sizing: border-box;
    .image {
      width: 100%;
      height: 98%;
      position: absolute;
      object-fit: cover;
      border-radius: 14rpx;

      // filter: blur(4rpx);
      // -webkit-filter: blur(4rpx);
      // -moz-filter: blur(4rpx);
      // -ms-filter: blur(4rpx);
      // -o-filter: blur(4rpx);
    }

    .date {
      width: 100%;
      background: rgba(0, 0, 0, 0.5);
      position: absolute;
      border-bottom-left-radius: 14rpx;
      border-bottom-right-radius: 14rpx;
      bottom: 2rpx;
      font-size: 30upx;
      color: #fff;
      font-weight: 500;
      padding: 10rpx 32rpx;
      box-sizing: border-box;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }

  .desc {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24upx 32rpx 6upx 32rpx;

    .name {
      color: #474a58;
      font-size: 26upx;
      .ellipsis-x(2);
    }

    .desc-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .money {
        color: #ff5998;

        .unit {
          font-size: 26upx;
        }

        .num {
          font-size: 30upx;
        }
      }

      .sold {
        font-size: 26upx;
        color: #8389a0;

        .label {
        }

        .count {
        }
      }
    }
  }
}
</style>
